<template>
	<view class="container">		
		<!--入库表单-->
		<view class="form-section">
			<!--快速操作区域-->
			<view class="quick-actions">
				<text class="quick-title">快速入库</text>
				<view class="quick-buttons">
					<view class="quick-btn" @click="quickInbound('repair')">
						<image src="/static/tools.png" class="quick-icon" />
						<text>维修工具</text>
					</view>
					<view class="quick-btn" @click="quickInbound('cleaning')">
						<image src="/static/contact.png" class="quick-icon" />
						<text>清洁用品</text>
					</view>
					<view class="quick-btn" @click="quickInbound('safety')">
						<image src="/static/warn.png" class="quick-icon" />
						<text>安全设备</text>
					</view>
				</view>
			</view>
			
			<view class="form-card">
				<view class="form-header">
					<text class="form-title">入库申请</text>
					<view class="form-status" :class="getStatusClass(formData.status)">
						{{getStatusText(formData.status)}}
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">入库单号</text>
					<text class="form-value">{{formData.code}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">入库日期</text>
					<text class="form-value">{{formData.date}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">操作员</text>
					<text class="form-value">{{formData.operator}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">入库类型</text>
					<picker 
						:value="formData.typeIndex" 
						:range="inboundTypes" 
						@change="onTypeChange"
					>
						<view class="picker-value">
							<text>{{inboundTypes[formData.typeIndex]}}</text>
							<image src="/static/arrow-right-gray.png" class="picker-arrow" />
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">供应商</text>
					<picker 
						:value="formData.supplierIndex" 
						:range="suppliers" 
						@change="onSupplierChange"
					>
						<view class="picker-value">
							<text>{{suppliers[formData.supplierIndex]}}</text>
							<image src="/static/arrow-right-gray.png" class="picker-arrow" />
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">入库仓库</text>
					<picker 
						:value="formData.warehouseIndex" 
						:range="warehouses" 
						@change="onWarehouseChange"
					>
						<view class="picker-value">
							<text>{{warehouses[formData.warehouseIndex]}}</text>
							<image src="/static/arrow-right-gray.png" class="picker-arrow" />
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">紧急程度</text>
					<view class="urgency-selector">
						<view 
							class="urgency-item" 
							:class="{ active: formData.urgency === 'normal' }"
							@click="formData.urgency = 'normal'"
						>
							<view class="urgency-dot normal"></view>
							<text>普通</text>
						</view>
						<view 
							class="urgency-item" 
							:class="{ active: formData.urgency === 'urgent' }"
							@click="formData.urgency = 'urgent'"
						>
							<view class="urgency-dot urgent"></view>
							<text>紧急</text>
						</view>
						<view 
							class="urgency-item" 
							:class="{ active: formData.urgency === 'critical' }"
							@click="formData.urgency = 'critical'"
						>
							<view class="urgency-dot critical"></view>
							<text>特急</text>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">备注说明</text>
					<textarea 
						class="form-textarea" 
						placeholder="请输入入库备注信息"
						v-model="formData.remark"
						maxlength="200"
					></textarea>
				</view>
			</view>
		</view>
		
		<!--物料录入-->
		<view class="materials-section">
			<view class="section-header">
				<text class="section-title">入库物料</text>
				<view class="action-buttons-header">
					<view class="btn-import" @click="importMaterials">
						<image src="/static/scan.png" class="import-icon" />
						<text>批量导入</text>
					</view>
					<view class="add-btn" @click="showMaterialForm = true">
						<image src="/static/inbound.png" class="add-icon" />
						<text>添加物料</text>
					</view>
				</view>
			</view>
			
			<view class="materials-list">
				<view 
					class="material-item" 
					v-for="(item, index) in inboundMaterials" 
					:key="index"
				>
					<view class="material-info">
						<image :src="item.image" class="material-image" />
						<view class="material-details">
							<text class="material-name">{{item.name}}</text>
							<text class="material-code">{{item.code}}</text>
							<text class="material-category">{{item.category}}</text>
							<text class="material-spec">规格: {{item.specification}}</text>
						</view>
					</view>
					<view class="material-quantity">
						<view class="quantity-info">
							<text class="quantity-label">入库数量</text>
							<text class="quantity-value">{{item.quantity}}{{item.unit}}</text>
						</view>
						<view class="quantity-info">
							<text class="quantity-label">单价</text>
							<text class="quantity-value">¥{{item.price}}</text>
						</view>
					</view>
					<view class="material-remove" @click="removeMaterial(index)">
						<text>×</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--统计信息-->
		<view class="summary-section">
			<view class="summary-card">
				<view class="summary-item">
					<text class="summary-label">物料种类</text>
					<text class="summary-value">{{inboundMaterials.length}}种</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">总数量</text>
					<text class="summary-value">{{totalQuantity}}件</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">总金额</text>
					<text class="summary-value">¥{{totalAmount}}</text>
				</view>
			</view>
		</view>
		
		<!--操作按钮-->
		<view class="action-section">
			<view class="action-buttons">
				<view class="btn-secondary" @click="saveDraft">保存草稿</view>
				<view class="btn-primary" @click="submitInbound">确认入库</view>
			</view>
		</view>
		
		<!--物料录入弹窗-->
		<view class="form-modal" v-if="showMaterialForm" @click="showMaterialForm = false">
			<view class="form-content" @click.stop>
				<view class="form-header">
					<text class="form-title">添加物料</text>
					<text class="form-close" @click="showMaterialForm = false">×</text>
				</view>
				
				<view class="form-body">
					<view class="input-group">
						<text class="input-label">物料名称</text>
						<input 
							class="input-field" 
							placeholder="请输入物料名称"
							v-model="newMaterial.name"
						/>
					</view>
					
					<view class="input-group">
						<text class="input-label">物料编码</text>
						<input 
							class="input-field" 
							placeholder="请输入物料编码"
							v-model="newMaterial.code"
						/>
					</view>
					
					<view class="input-group">
						<text class="input-label">物料分类</text>
						<picker 
							:value="newMaterial.categoryIndex" 
							:range="categories" 
							@change="onCategoryChange"
						>
							<view class="picker-field">
								<text>{{categories[newMaterial.categoryIndex]}}</text>
								<image src="/static/arrow-right-gray.png" class="picker-arrow" />
							</view>
						</picker>
					</view>
					
					<view class="input-group">
						<text class="input-label">规格型号</text>
						<input 
							class="input-field" 
							placeholder="请输入规格型号"
							v-model="newMaterial.specification"
						/>
					</view>
					
					<view class="input-row">
						<view class="input-group">
							<text class="input-label">入库数量</text>
							<input 
								class="input-field" 
								type="number"
								placeholder="数量"
								v-model="newMaterial.quantity"
							/>
						</view>
						<view class="input-group">
							<text class="input-label">单位</text>
							<picker 
								:value="newMaterial.unitIndex" 
								:range="units" 
								@change="onUnitChange"
							>
								<view class="picker-field">
									<text>{{units[newMaterial.unitIndex]}}</text>
									<image src="/static/arrow-right-gray.png" class="picker-arrow" />
								</view>
							</picker>
						</view>
					</view>
					
					<view class="input-group">
						<text class="input-label">单价(元)</text>
						<input 
							class="input-field" 
							type="digit"
							placeholder="请输入单价"
							v-model="newMaterial.price"
						/>
					</view>
					
					<view class="input-group">
						<text class="input-label">物料图片</text>
						<view class="image-upload" @click="selectImage">
							<image v-if="newMaterial.image" :src="newMaterial.image" class="uploaded-image" />
							<view v-else class="upload-placeholder">
								<image src="/static/placeholder.png" class="upload-icon" />
								<text>点击上传图片</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-footer">
					<view class="btn-secondary" @click="showMaterialForm = false">取消</view>
					<view class="btn-primary" @click="addMaterial">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	// 表单数据
	const formData = ref({
		code: 'RK' + new Date().getTime().toString().slice(-8),
		date: new Date().toLocaleDateString(),
		operator: '李四',
		typeIndex: 0,
		supplierIndex: 0,
		remark: '',
		status: 'draft',
		warehouseIndex: 0,
		urgency: 'normal'
	});
	
	const inboundTypes = ['采购入库', '退货入库', '调拨入库', '其他入库'];
	const suppliers = ['供应商A', '供应商B', '供应商C', '供应商D'];
	const units = ['个', '套', '件', '箱', '瓶', '米', '千克'];
	const warehouses = ['仓库A', '仓库B', '仓库C', '仓库D'];
	const categories = ['维修工具', '清洁用品', '安全设备', '办公用品', '建筑材料', '其他'];
	
	const showMaterialForm = ref(false);
	
	// 入库物料列表
	const inboundMaterials = ref([]);
	
	// 新物料数据
	const newMaterial = ref({
		name: '',
		code: '',
		categoryIndex: 0,
		specification: '',
		quantity: '',
		unitIndex: 0,
		price: '',
		image: ''
	});
	
	// 计算总数量和总金额
	const totalQuantity = computed(() => {
		return inboundMaterials.value.reduce((sum, item) => sum + parseInt(item.quantity), 0);
	});
	
	const totalAmount = computed(() => {
		return inboundMaterials.value.reduce((sum, item) => {
			return sum + (parseFloat(item.price) * parseInt(item.quantity));
		}, 0).toFixed(2);
	});
	
	const onTypeChange = (e: any) => {
		formData.value.typeIndex = e.detail.value;
	};
	
	const onSupplierChange = (e: any) => {
		formData.value.supplierIndex = e.detail.value;
	};
	
	const onWarehouseChange = (e: any) => {
		formData.value.warehouseIndex = e.detail.value;
	};
	
	const onCategoryChange = (e: any) => {
		newMaterial.value.categoryIndex = e.detail.value;
	};
	
	const onUnitChange = (e: any) => {
		newMaterial.value.unitIndex = e.detail.value;
	};
	
	const selectImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				newMaterial.value.image = res.tempFilePaths[0];
			}
		});
	};
	
	const addMaterial = () => {
		// 验证必填字段
		if (!newMaterial.value.name || !newMaterial.value.code || !newMaterial.value.quantity || !newMaterial.value.price) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			});
			return;
		}
		
		// 添加到入库列表
		inboundMaterials.value.push({
			...newMaterial.value,
			unit: units[newMaterial.value.unitIndex],
			category: categories[newMaterial.value.categoryIndex]
		});
		
		// 重置表单
		newMaterial.value = {
			name: '',
			code: '',
			categoryIndex: 0,
			specification: '',
			quantity: '',
			unitIndex: 0,
			price: '',
			image: ''
		};
		
		showMaterialForm.value = false;
	};
	
	const removeMaterial = (index: number) => {
		inboundMaterials.value.splice(index, 1);
	};
	
	const importMaterials = () => {
		uni.showModal({
			title: '批量导入',
			content: '是否要扫描二维码批量导入物料？',
			success: (res) => {
				if (res.confirm) {
					uni.scanCode({
						success: (scanRes) => {
							// 这里可以解析二维码数据并批量添加物料
							uni.showToast({
								title: '导入成功',
								icon: 'success'
							});
						},
						fail: () => {
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							});
						}
					});
				}
			}
		});
	};
	
	const quickInbound = (type: string) => {
		const typeMap = {
			'repair': '维修工具',
			'cleaning': '清洁用品',
			'safety': '安全设备'
		};
		
		uni.showModal({
			title: '快速入库',
			content: `是否要快速入库${typeMap[type]}？`,
			success: (res) => {
				if (res.confirm) {
					// 这里可以预设一些常用的物料
					uni.showToast({
						title: '快速入库成功',
						icon: 'success'
					});
				}
			}
		});
	};
	
	const getStatusClass = (status: string) => {
		const statusMap = {
			'draft': 'status-draft',
			'pending': 'status-pending',
			'completed': 'status-completed',
			'cancelled': 'status-cancelled'
		};
		return statusMap[status] || 'status-draft';
	};
	
	const getStatusText = (status: string) => {
		const statusMap = {
			'draft': '草稿',
			'pending': '待确认',
			'completed': '已完成',
			'cancelled': '已取消'
		};
		return statusMap[status] || '草稿';
	};
	
	const saveDraft = () => {
		uni.showToast({
			title: '草稿已保存',
			icon: 'success'
		});
	};
	
	const submitInbound = () => {
		if (inboundMaterials.value.length === 0) {
			uni.showToast({
				title: '请添加入库物料',
				icon: 'none'
			});
			return;
		}
		
		uni.showModal({
			title: '确认入库',
			content: `确定要入库 ${inboundMaterials.value.length} 种物料吗？`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '入库成功',
						icon: 'success'
					});
					formData.value.status = 'completed';
				}
			}
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		min-height: 100vh;
	}

	.form-section {
		padding: 32rpx;
	}

	.quick-actions {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.quick-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 20rpx;
		display: block;
	}

	.quick-buttons {
		display: flex;
		gap: 16rpx;
	}

	.quick-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 16rpx;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
		border-radius: 16rpx;
		border: 2rpx solid rgba(102, 126, 234, 0.2);
		transition: all 0.3s ease;
	}

	.quick-btn:active {
		transform: scale(0.98);
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
	}

	.quick-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 12rpx;
		opacity: 0.8;
	}

	.quick-btn text {
		font-size: 24rpx;
		color: #2c3e50;
		font-weight: 600;
	}

	.form-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.form-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid rgba(102, 126, 234, 0.1);
	}

	.form-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #2c3e50;
		position: relative;
	}

	.form-title::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 0;
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #667eea, #764ba2);
		border-radius: 2rpx;
	}

	.form-status {
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.status-draft {
		background: linear-gradient(135deg, #f8f9fa, #e9ecef);
		color: #6c757d;
	}

	.status-pending {
		background: linear-gradient(135deg, #fff3cd, #ffeaa7);
		color: #856404;
	}

	.status-completed {
		background: linear-gradient(135deg, #d4edda, #c3e6cb);
		color: #155724;
	}

	.status-cancelled {
		background: linear-gradient(135deg, #f8d7da, #f5c6cb);
		color: #721c24;
	}

	.form-item {
		margin-bottom: 32rpx;
	}

	.form-label {
		display: block;
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 16rpx;
		position: relative;
	}

	.form-label::before {
		content: '';
		position: absolute;
		left: -16rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 24rpx;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 3rpx;
	}

	.form-value {
		font-size: 30rpx;
		color: #34495e;
		font-weight: 500;
		padding: 16rpx 0;
	}

	.picker-value {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid rgba(102, 126, 234, 0.1);
		transition: all 0.3s ease;
	}

	.picker-value:active {
		background: rgba(102, 126, 234, 0.05);
		border-radius: 12rpx;
	}

	.picker-arrow {
		width: 28rpx;
		height: 28rpx;
		opacity: 0.6;
	}

	.form-textarea {
		width: 100%;
		height: 140rpx;
		padding: 20rpx;
		border: 2rpx solid rgba(102, 126, 234, 0.2);
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #2c3e50;
		background: rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
	}

	.form-textarea:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}

	.materials-section {
		flex: 1;
		padding: 0 32rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #2c3e50;
		position: relative;
	}

	.section-title::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 0;
		width: 80rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #667eea, #764ba2);
		border-radius: 2rpx;
	}

	.action-buttons-header {
		display: flex;
		gap: 20rpx;
	}

	.btn-import {
		display: flex;
		align-items: center;
		padding: 16rpx 28rpx;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 28rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
	}

	.btn-import:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
	}

	.import-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		filter: brightness(0) invert(1);
	}

	.add-btn {
		display: flex;
		align-items: center;
		padding: 16rpx 28rpx;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 28rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
	}

	.add-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
	}

	.add-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		filter: brightness(0) invert(1);
	}

	.materials-list {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		backdrop-filter: blur(10px);
	}

	.material-item {
		display: flex;
		align-items: center;
		padding: 32rpx;
		border-bottom: 2rpx solid rgba(102, 126, 234, 0.1);
		transition: all 0.3s ease;
	}

	.material-item:last-child {
		border-bottom: none;
	}

	.material-item:active {
		background: rgba(102, 126, 234, 0.05);
	}

	.material-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.material-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.material-details {
		display: flex;
		flex-direction: column;
	}

	.material-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 8rpx;
	}

	.material-code {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-bottom: 6rpx;
	}

	.material-category {
		font-size: 22rpx;
		color: #667eea;
		background: rgba(102, 126, 234, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		margin-bottom: 6rpx;
		display: inline-block;
		font-weight: 500;
	}

	.material-spec {
		font-size: 24rpx;
		color: #95a5a6;
	}

	.material-quantity {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-right: 20rpx;
	}

	.quantity-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-bottom: 12rpx;
	}

	.quantity-label {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-bottom: 6rpx;
	}

	.quantity-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.material-remove {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #ff6b6b, #ee5a52);
		border-radius: 50%;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
		transition: all 0.3s ease;
	}

	.material-remove:active {
		transform: scale(0.95);
	}

	.summary-section {
		padding: 0 32rpx;
		margin-bottom: 24rpx;
	}

	.summary-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.summary-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.summary-item::after {
		content: '';
		position: absolute;
		right: -50%;
		top: 50%;
		transform: translateY(-50%);
		width: 2rpx;
		height: 60rpx;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
	}

	.summary-item:last-child::after {
		display: none;
	}

	.summary-label {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.summary-value {
		font-size: 36rpx;
		font-weight: 700;
		background: linear-gradient(135deg, #667eea, #764ba2);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.action-section {
		padding: 32rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-top: 2rpx solid rgba(102, 126, 234, 0.1);
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.btn-secondary {
		flex: 1;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid rgba(102, 126, 234, 0.3);
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #667eea;
		background: rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
	}

	.btn-secondary:active {
		background: rgba(102, 126, 234, 0.1);
		transform: translateY(2rpx);
	}

	.btn-primary {
		flex: 1;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #fff;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
	}

	.btn-primary:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
	}

	.form-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
	}

	.form-content {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		width: 90%;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(20px);
	}

	.form-body {
		padding: 32rpx;
	}

	.input-group {
		margin-bottom: 32rpx;
	}

	.input-row {
		display: flex;
		gap: 20rpx;
	}

	.input-row .input-group {
		flex: 1;
	}

	.input-label {
		display: block;
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 16rpx;
	}

	.input-field {
		width: 100%;
		height: 88rpx;
		padding: 0 20rpx;
		border: 2rpx solid rgba(102, 126, 234, 0.2);
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #2c3e50;
		background: rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
	}

	.input-field:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}

	.picker-field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		border: 2rpx solid rgba(102, 126, 234, 0.2);
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.8);
	}

	.image-upload {
		width: 100%;
		height: 240rpx;
		border: 3rpx dashed rgba(102, 126, 234, 0.3);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.image-upload:active {
		border-color: #667eea;
		background: rgba(102, 126, 234, 0.05);
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #7f8c8d;
	}

	.upload-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
		opacity: 0.6;
	}

	.form-footer {
		display: flex;
		padding: 32rpx;
		gap: 20rpx;
		border-top: 2rpx solid rgba(102, 126, 234, 0.1);
	}

	.form-close {
		font-size: 44rpx;
		color: #7f8c8d;
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.form-close:active {
		background: rgba(127, 140, 141, 0.1);
	}

	.urgency-selector {
		display: flex;
		gap: 12rpx;
	}

	.urgency-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12rpx 20rpx;
		border: 2rpx solid rgba(102, 126, 234, 0.2);
		border-radius: 16rpx;
		transition: all 0.3s ease;
		flex: 1;
		background: rgba(255, 255, 255, 0.8);
	}

	.urgency-item:active {
		transform: scale(0.98);
	}

	.urgency-item.active {
		background: linear-gradient(135deg, #667eea, #764ba2);
		border-color: transparent;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
	}

	.urgency-item.active .urgency-dot {
		background: #fff;
	}

	.urgency-item.active text {
		color: #fff;
		font-weight: 600;
	}

	.urgency-item text {
		font-size: 24rpx;
		color: #2c3e50;
		font-weight: 500;
	}

	.urgency-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		margin-bottom: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.normal {
		background: linear-gradient(135deg, #28a745, #20c997);
	}

	.urgent {
		background: linear-gradient(135deg, #ffc107, #fd7e14);
	}

	.critical {
		background: linear-gradient(135deg, #dc3545, #e83e8c);
	}
</style>